<template>
  <div class="main">
    <div class="mainBody">
      <el-card header="我的信息">
        <msgList @jump="jumpRoute" />
      </el-card>
      <el-card header="我的应用" style="width: 40%;">
        <div class="appList">
          <div v-for="item in subSystem" :key="item.Id" class="app" @click="switchSystem(item.Id)">
            <span class="icon"><icon :icon="item.Icon" /></span>
            <span class="name">{{ item.Name }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import msgList from './components/msgList.vue'
export default {
  components: {
    msgList
  },
  data() {
    return {
      fileId: null,
      fileUri: null
    }
  },
  computed: {
    ...mapGetters(['fullRoutes', 'subSystem', 'curSysId'])
  },
  mounted() {
  },
  methods: {
    switchSystem(value) {
      if (this.curSysId !== value) {
        this.$store.dispatch('user/switchSubSys', value)
      }
      this.$router.push({ name: this.$store.getters.loadRoute })
    },
    jumpRoute(name) {
      const subId = this.getSubSysId(name)
      if (subId != null && this.curSysId !== subId) {
        this.$store.dispatch('user/switchSubSys', subId)
      }
      this.$router.replace({ name: name })
    },
    getSubSysId(name) {
      for (let i = 0; i < this.subSystem.length; i++) {
        const sub = this.subSystem[i]
        const routes = this.fullRoutes[sub.Id]
        if (this.checkIsExist(routes, name)) {
          return sub.Id
        }
      }
      return null
    },
    checkIsExist(routes, name) {
      for (let i = 0; i < routes.length; i++) {
        const route = routes[i]
        if (route.children != null && route.children.length > 0) {
          if (this.checkIsExist(route.children, name)) {
            return true
          }
        } else if (route.name === name) {
          return true
        }
      }
      return false
    }
  }
}
</script>
<style scoped>
.main {
  width: 100%;
  text-align: center;
}
.mainBody {
    max-width: 1900px;
    padding: 20px;
    width: 100%;
    display: inline-block;
}
.mainBody .el-card {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
}
.appList{
  width: 100%;
  display: inline-block;
}
.app {
  display: inline-block;
  width: 120px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  cursor: pointer;
}
.app:hover {
  background-color: #f5f4f4b5;
  border-color: #1890ff;
}
.app .icon {
  display:inline-block;
  width: 100%;
  font-size: 2.5rem;
  line-height: 50px;
  text-align: center;
}
.app .name {
  display:inline-block;
  width: 100%;
  text-align: center;
  line-height: 30px;
}
</style>
